import React, { Component } from 'react';
import { View, Dimensions, Image, StyleSheet } from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import { connect } from 'react-redux';

import { TABBAR_LABEL, Global } from '../util/constants';
import { scaleSize, scaleFontSize } from '../util/size';

import MarketItems from '../components/MarketItems';
import CommonTitleBar from '../components/CommonTitleBar';
import icons from '../util/icons';
import { IReduxMarketInfo, INavigation } from '../interface';
import * as marketAction from '../actions/market';
import { utilGetMarketInfoByCoinType } from '../util/marketUtil';

const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');


interface IProps {
    marketInfo: IReduxMarketInfo,
    updateBalanceInfo: Function,
    navigation: INavigation
}

class MarketIndex extends Component<IProps, any> {

    static navigationOptions = {
        tabBarLabel: TABBAR_LABEL.market,
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return (
                    <Image source={icons.tabMarketO} style={Global.tabIconStyles} />
                );
            }
            return (
                <Image source={icons.tabMarket} style={Global.tabIconStyles} />
            );
        },
    };

    render() {
        let marketInfo = this.props.marketInfo;
        return (
            <View>
                <CommonTitleBar onlyBar={true} back={false} backgroundColor={'white'} nav={null} />
                <View style={{
                    height: deviceHeight,
                }}>
                    <ScrollableTabView
                        style={{ marginTop: 0, height: deviceHeight }}
                        initialPage={0}
                        tabBarUnderlineStyle={{ backgroundColor: '#3A62F0', height: 1 }}
                        tabBarActiveTextColor={'#3A62F0'}
                        tabBarInactiveTextColor={'#999999'}
                        tabBarBackgroundColor={'#FFFFFF'}
                        tabBarTextStyle={{
                            height: scaleSize(40),
                            lineHeight: scaleSize(40),
                            width: scaleSize((deviceWidth) / 5),
                            fontSize: scaleFontSize(14),
                            textAlign: 'center'
                        }}
                        renderTabBar={() => <ScrollableTabBar style={{ height: 40 }} tabsContainerStyle={{ justifyContent: 'center', width: scaleSize(deviceWidth) }} tabStyle={{ paddingLeft: 1, paddingRight: 0, height: 40 }} />}
                    >
                        <View tabLabel={'热门'} style={[styles.content]}>
                            <MarketItems keyV={'test1'} navigation={this.props.navigation} 
                                data={utilGetMarketInfoByCoinType(marketInfo, 'BTC')}
                                marketInfo={marketInfo}
                            />
                        </View>

                        <View tabLabel='BTC' style={[styles.content]}>
                            <MarketItems keyV={'test2'} navigation={this.props.navigation} 
                            data={utilGetMarketInfoByCoinType(marketInfo, 'BTC')}
                            marketInfo={marketInfo}
                            />
                        </View>
                        <View tabLabel='ETH' style={[styles.content]}>
                            <MarketItems keyV={'test3'} navigation={this.props.navigation} 
                            data={utilGetMarketInfoByCoinType(marketInfo, 'ETH')}
                            marketInfo={marketInfo}
                            />
                        </View>
                        <View tabLabel='EOS' style={[styles.content]}>
                            <MarketItems keyV={'test4'} navigation={this.props.navigation} 
                            data={utilGetMarketInfoByCoinType(marketInfo, 'EOS')}
                            marketInfo={marketInfo}
                            />
                        </View>
                        <View tabLabel='CXP' style={[styles.content]}>
                            <MarketItems keyV={'test5'} navigation={this.props.navigation} 
                            data={utilGetMarketInfoByCoinType(marketInfo, 'CXP')}
                            marketInfo={marketInfo}
                            />
                        </View>
                    </ScrollableTabView>
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    content: {
        marginTop: scaleSize(5),
    }
})


export default connect(
    (state) => ({
        marketInfo: state.market
    }),
    (dispatch) => ({
        updateBalanceInfo: (data) => (dispatch(marketAction.updateMarketData(data))),
    })
)(MarketIndex);
